<template>
  <div class="echarts" ref="mapChart" @dblclick="revertMap" />
</template>
<script>

import areaMaps from '@/utils/map_utils'
import * as echarts from 'echarts'
import ZJJson from '@/assets/mapJson/zhejiang.json'
export default {
  name: "echartsMapZJ",
  
  data() {
    return {
      mapChart: null,
    };
  },
  methods: {
    initMap () {
      this.mapChart && this.mapChart.dispose()
      this.mapChart = null
      this.mapChart = echarts.init(this.$refs.mapChart)
      echarts.registerMap('ZJ', ZJJson)
      const initOption = {
        geo:{
          map:'ZJ',
          roam:true,
          zoom: 1.1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          label:{
            show: true,
            formatter: function (params) {
              return `{name|${params.name}}`;
            },
            rich:{
              name:{
                color:'#fff',
                padding:[3,3],
                borderWidth:1,
                borderColor:'#fff'
              }
            },
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff"
          },
          emphasis: {
            label: {
              color: "#FFFFFF"
            },
            itemStyle: {
              areaColor: "#008affaa",
            },
          },
          itemStyle: {
            borderWidth: 1, //边际线大小
            borderColor: "#00fff6", //边界线颜色
            areaColor:'#015ab6',
          },
          // 地图点击过后的样式
          select:{
            itemStyle:{
              areaColor: "#008affaa"
            }
          }
        }
      }
      this.mapChart.setOption(initOption)
    },
    revertMap () {
      // 如果是浙江地图，不触发双击事件
      if (this.mapChart._model.option.geo[0].map === 'ZJ') return
      echarts.registerMap('ZJ', ZJJson)
      const revertOption = {
         geo: {
          map: 'ZJ',
          center: undefined,
          zoom: 1
        }
      }
      this.mapChart.setOption(revertOption)
    }
  },

  mounted () {
    this.initMap()
    this.mapChart.on('click', params => {
      const currentItem = areaMaps.find(item => item.label === params.name)
      if (!currentItem) return
      const cityJSON = currentItem.mapJson
      const cityName = currentItem.label
      echarts.registerMap(cityName, cityJSON)
      const changeOption = {
        geo: {
          map: cityName,
          center: undefined,
          zoom: 1
        }
      }
      this.mapChart.setOption(changeOption)
    })
  }
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: #1b1a1a;
}

</style>